<template>
  <van-nav-bar>
    <template #left>
      <img
        v-if="title !== '护肤榜' && title !== '美妆榜'"
        src="http://10.31.169.37:3000/images/index/测一测.png"
        alt=""
      />
      <span v-if="title !== '护肤榜' && title !== '美妆榜'">测一测</span>
      <van-icon
        v-if="title === '护肤榜' || title === '美妆榜'"
        name="arrow-left"
        color="#000"
        size="26"
        @click="back"
      />
    </template>
    <template #title>
      <van-search
        v-if="title == '首页'"
        v-model="value"
        placeholder="请输入搜索"
      />
      <span v-if="title == '定制' || title == '护肤榜' || title === '美妆榜'">{{
        title
      }}</span>
    </template>
    <template #right>
      <img
        v-if="title === '首页'"
        class="sign"
        src="http://10.31.169.37:3000/images/index/签到.png"
        alt=""
      />
      <img
        v-if="title === '首页' || title === '聊'"
        class="bell"
        src="http://10.31.169.37:3000/images/index/铃铛.png"
        alt=""
      />
      <img
        class="set"
        v-if="title === '我的'"
        src="http://10.31.169.37:3000/images/index/形状 24.png"
        alt=""
      />
      <van-icon
        v-if="title === '护肤榜' || title === '美妆榜'"
        name="search"
        size="28"
        color="#000"
      />
    </template>
  </van-nav-bar>
</template>
<script>
import { NavBar, Search, Icon } from "vant";
export default {
  props: ["title"], //中间标题 自己是什么标题就写什么 “首页”，“聊”，“定制”，“我的”
  data() {
    return {
      value: "",
    };
  },
  activated() {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    back() {
      this.$router.go(-1);
    },
  },
  components: {
    VanNavBar: NavBar,
    VanSearch: Search,
    VanIcon: Icon,
  },
};
</script>
<style lang="less">
.head {
  overflow: hidden;
}

.van-nav-bar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 200;
  .van-nav-bar__left {
    img {
      width: 24px;
      height: 23px;
    }
    span {
      margin-left: 5px;
      width: 48px;
      height: 23px;
      font-size: 15px;
      color: #000000;
    }
  }
  .van-nav-bar__title {
    .van-search {
      padding: 0;
      //width: 169px;
      height: 28px;
      background: #f5f5f5;
      border-radius: 14px;
      overflow: hidden;
    }
  }
  .van-nav-bar__right {
    .sign {
      width: 33px;
      height: 33px;
    }
    .bell {
      width: 20px;
      height: 23px;
      margin-left: 15px;
    }
    .set {
      width: 22px;
      height: 22px;
    }
  }
}
</style>
